<template>
  <div class="box">
    <el-form :model="form" label-width="120px" v-loading="loading" status-icon :rules="rules" ref="formRef">
      <div style="display: inline-block">
        <el-form-item label="用户名" prop="username">
          <el-input v-model="form.username" style="width: 200px;" />
        </el-form-item>
      </div>
      <div style="display: inline-block">
        <el-form-item label="昵称" prop="nickname">
          <el-input v-model="form.nickname" style="width: 200px;" />
        </el-form-item>
      </div>
      <div style="display: inline-block">
        <el-form-item label="手机号">
          <el-input v-model="form.phone" style="width: 200px;" />
        </el-form-item>
      </div>
      <div>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="form.email" style="width: 400px;" />
        </el-form-item>
      </div>
      <div style="display: inline-block;">
        <el-form-item label="地址">
          <el-input v-model="form.address" style="width: 400px;" />
        </el-form-item>
      </div>
      <div>
        <el-form-item label="付款账户">
          <el-input v-model="form.account" style="width: 1000px;" />
        </el-form-item>
      </div>
      <el-form-item>
        <el-button type="primary" @click="onUpdate">修改</el-button>
        <el-button @click="quitEdit">退出</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { reactive } from 'vue';
import { getFlowerUserDetailById, updateFlowerUser, flowerUserExistsTest } from "@/api/flowerUser";
import { ElMessage } from 'element-plus';

export default {
  name: "flowerUserChange",
  data() {
    return {
      // do not use same name with ref
      form: reactive({
        id:'',
        username: '',
        nickname: '',
        phone: '',
        email: '',
        address: '',
        account: ''
      }),
      loading: false,
      //当前展示的id
      id: 0,
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 6, max: 12, message: '用户名长度需要为6到12位', trigger: 'blur' },
          { pattern: /^[a-zA-Z0-9]+$/, message: '用户名只能由数字、英文字母组成', trigger: 'blur' },
          {
            validator: (rule, value, callback) => {
              const params = {
                username: value
              };
              flowerUserExistsTest(params).then(result => {
                var findId=result.data.data
                if(findId===this.id||findId===0){
                  callback()
                }
                else{
                  callback("用户名已存在")
                }
              })
            },
            trigger: 'blur'
          },
        ],
        nickname: [
          { required: true, message: '请输入昵称', trigger: 'blur' },
          { min: 1, max: 10, message: '昵称长度需要为1到10位', trigger: 'blur' },
        ],
        email: [
          { required: true, message: '请输入邮箱', trigger: 'blur' },
          {
            type: 'email',
            message: '请输入正确的邮箱格式',
            trigger: ['blur', 'change']
          },
          {
            validator: (rule, value, callback) => {
              const params = {
                email: value
              };
              flowerUserExistsTest(params).then(result => {
                var findId=result.data.data
                if(findId===this.id||findId===0){
                  callback()
                }
                else{
                  callback("邮箱已存在")
                }
              })
            },
            trigger: 'blur'
          },
        ],
      },
    }
  },
  methods: {
    //提交修改
    onUpdate() {
      this.$refs.formRef.validate((valid, errors) => {
        if (valid) {
          this.form.id=this.id;
          const data = this.form;
          return updateFlowerUser(data)
            .then((response) => {
              this.quitEdit();
              this.$emit('updateSuccess');
              ElMessage.success("修改成功");
            })
            .catch((error) => {
              ElMessage.error("修改失败");
            });
        }
        else {
          ElMessage.warning("请检查你的输入")
          console.log(errors)
        }
      })
    },

    quitEdit() {
      this.$emit('quitEdit');
    },

    //获取id并展示已有数据
    showFlowerUser(id) {
      this.loading = true;
      this.id = id;
      const params = {
        id: this.id
      };
      return getFlowerUserDetailById(params)
        .then((response) => {
          this.form = response.data.data;
          this.loading = false;
        })
        .catch((error) => {
          console.log(error)
        });
    },
  },
}
</script>

<style scoped>
.box {
  width: 1200px;
  display: inline-block;
}
</style>